<template>
	<s-layout title="对比" :bgStyle="{ color: '#ffff' }">
		<view class="add-pk" @click="showPkCar()">
			<uni-icons type="plusempty" size="14" color="#ff6400"></uni-icons>
			<text>添加对比车型</text>
		</view>

		<view class="my-pk">
			<view class="my-pk-title">我的对比</view>

			<view class="ss-m-l-20 ss-m-r-20">
				<view class="car-box ss-r-10 ss-m-b-14" v-for="item in state.list" :key="item.id">
					<view class="ss-flex ss-col-center">
						<label class="check-box ss-flex ss-col-center ss-p-l-10" @tap="onSelectSingle(item)">
							<radio :checked="state.selectedIds.includes(item.car_id)" color="#ff6400"
								style="transform: scale(0.8)" @tap.stop="onSelectSingle(item)" />
						</label>
						<view class="car-item ss-flex">
							<image class="car-image" :src="item.logo"></image>
							<view class="car-right">
								<view class="car-title ss-line-2">{{item.name}}</view>
								<view class="car-price">指导价：{{item.price}}</view>
							</view>
						</view>
					</view>
					
					<view class="del-car" @click="deleteSelect(item)">
						<uni-icons type="closeempty" size="12"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<su-fixed bottom placeholder bg="bg-white">
			<view class="bottom-button">
				<view class="pk-button" :class="{'dis-pk-button': state.selectedIds.length <= 1}" @click="goCarPk">
					开始对比<text v-if="state.selectedIds.length > 0">({{state.selectedIds.length}})</text>
				</view>
			</view>
		</su-fixed>

		<select-pk-car ref="pkCarRef" @select="selectCar"></select-pk-car>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import SelectPkCar from './components/selectPkCar';
	import {ref, reactive, computed} from 'vue';

	const pkCar = sheep.$store('pkCar');
	const state = reactive({
		list: computed(() => pkCar.list),
		selectedIds: computed(() => pkCar.selectedIds),
	});
	
	// 单选选中
	function onSelectSingle(item) {
		pkCar.selectSingle(item.car_id);
	}
	
	// 删除选中
	function deleteSelect(item) {
		pkCar.delete(item);
		pkCar.selectSingle(item.car_id);
	}

	// 选择pk车辆
	const pkCarRef = ref(null)

	function showPkCar() {
		pkCarRef.value.showDrawer();
	}

	function closePkCar() {
		pkCarRef.value.closeDrawer();
	}

	function selectCar(e) {
		pkCar.add(e)
	}
	
	function goCarPk(e) {
		sheep.$router.go('/pages/car/car-pk-details')
	}
</script>

<style lang="scss" scoped>
	.add-pk {
		margin: 30rpx;
		font-weight: 500;
		height: 90rpx;
		border-radius: 5rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ff6400;
		border: 2rpx solid #ff6400;


	}

	.bottom-button {
		padding: 30rpx;
	}

	.pk-button {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
		background: #ff6400;
	}

	.dis-pk-button {
		background: #ffe0cc;
	}

	.my-pk {
		.my-pk-title {
			padding: 10rpx 30rpx;
			font-weight: 400;
			color: #2d313e;
			background: linear-gradient(90deg, #f7f8fb, #ffffff);
		}
	}
	
	.car-box {
		position: relative;
		
		.del-car {
			position: absolute;
			right: 0;
			top: 0;
			background: #f7f8fb;
			width: 30rpx;
			height: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.car-item {
		position: relative;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #e5e5e5;
		background-color: #fff;
		
		&:last-child {
			border-bottom: 0;
		}
		
		.car-image {
			width: 175rpx;
			height: 130rpx;
		}
		.car-right {
			flex: 1;
			margin-left: 20rpx;
			.car-title {
				font-weight: 500;
				color: #333;
			}
			.car-price {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999;
			}
			
			.car-type {
				color: #999;
				font-size: 26rpx;
			}
		}
		
		.car-btn {
			position: absolute;
			right: 0;
			bottom: 30rpx;
			background: #fff;
			border: 1rpx solid #ff6400;
			font-size: 24rpx;
			line-height: 1.9;
			color: #ff6400;
			text-align: center;
		}
	}
</style>